<template>
  <div class="voteAdd">
    <div class="vote_div">
      <!-- 标题 -->
      <van-field
        class="vote_title"
        v-model="vote.voteTitle"
        rows="1"
        autosize
        type="textarea"
        maxlength="80"
        placeholder="输入标题,2-80字"
        show-word-limit
      />

      <!-- 选项 -->
      <div class="vote_content">
        <!-- 第一个选项 -->
        <ul class="vote_ul">
          <li class="chang_vote_li1"></li>
          <li class="chang_vote_li2">
            <input type="text" v-model="vote.option[0]" placeholder="选项1" />
          </li>
        </ul>
        <!-- 第二个选项 -->
        <ul class="vote_ul">
          <li class="chang_vote_li1"></li>
          <li class="chang_vote_li2">
            <input type="text" v-model="vote.option[1]" placeholder="选项2" />
          </li>
        </ul>

        <!-- 手动加入,可以剪掉-->
        <ul class="vote_ul" v-for="(iten, index) in number" :key="index">
          <li class="chang_vote_li1" @click.stop="reduce($event, index)">
            <div class="reduce">-</div>
          </li>
          <li class="chang_vote_li2">
            <input
              type="text"
              v-model="vote.option[index + 2]"
              :placeholder="'选项' + Number(index + 3)"
            />
          </li>
        </ul>
      </div>
      <!-- //增加 -->
      <ul class="vote_ul">
        <li class="chang_vote_li1" v-on:click="add($event)">
          <div class="add">+</div>
        </li>
        <li class="chang_vote_li2">
          <input type="text" placeholder="添加选项" readonly />
        </li>
      </ul>
    </div>

    <div class="voteType">
      <!-- 头片类型 -->
      <ul>
        <el-select v-model="vote.placeholder" @change="change" placeholder="请选择">
          <el-option v-for="(item,index) in vote.columns" :key="index" :label="item" :value="index"></el-option>
        </el-select>
      </ul>

      <!--  设置时间 -->
      <ul>
        <el-date-picker
          @change="changeDate"
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </ul>
    </div>
    <el-button type="primary" @click="voteAdd" style="margin:2% 30% 0 0;">提交</el-button>
  </div>
</template>

<script>
import { Notify } from 'vant'

export default {
  props: {
    editId: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    editId: function () {
      this.init()
    },
  },
  created() {
    this.init()
  },
  data() {
    return {
      number: 0, //增加的数量
      // 投票表
      time: '', // 时间字符传
      vote: {
        voteTitle: '',
        //选项的数组
        option: ['', ''],
        columns: ['单选', '双选', '多选'], // 投票的类型选择
        showPicker: false,
        placeholder: '单选',
      },
      type: 1,
      startTime: '', // 开始时间
      endTime: '', // 结束时间
      value1: [],
      show: false,
    }
  },

  methods: {
    async init() {
      const res = await this.$axios.get('/vote/info/' + this.editId)
      if (res.data.code == 200) {
        this.vote.voteTitle = res.data.data.title
        this.vote.option = res.data.data.optionList
        this.number = res.data.data.optionList.length - 2
        this.startTime = res.data.data.startTime
        this.endTime = res.data.data.endTime
        this.value1 = [this.startTime, this.endTime]
        this.type = res.data.data.type
        this.vote.placeholder = this.vote.columns[parseInt(this.type) - 1]
        console.log(this.vote.placeholder)
      }
    },

    // 日历选择器 回调方法
    changeDate(values) {
      this.startTime = Date.parse(values[0])
      this.endTime = Date.parse(values[1])
    },
    change(index) {
      this.type = index + 1
    },

    //减去选项方法
    reduce(e, index) {
      this.number = this.number - 1
      this.vote.option.splice(index + 2, 1)
    },
    //加选项的方法
    add(e) {
      if (this.number == 8) {
        return
      }
      this.number++
      this.vote.option.push('')
      let num = this.vote.option.length
    },
    // 发布投票
    async voteAdd() {
      if (this.value1.length == 0) {
        Notify({ type: 'danger', message: '请选择时间' })
        return
      } else if (this.vote.voteTitle == '') {
        Notify({ type: 'danger', message: '请填写标题' })
        return
      } else {
        const res = await this.$axios.post('/vote/update', {
          type: this.type,
          title: this.vote.voteTitle,
          id: this.editId,
          startTime: this.startTime,
          endTime: this.endTime,
          optionList: this.vote.option,
        })
        if (res.data.code == 200) {
          Notify({ type: 'success', message: '修改投票成功' })
          this.$emit('submitSucess')
        }
      }
    },
    // 获取投票选择的类型
    command(val) {
      console.log(val)
    },
    onConfirm(value) {
      this.vote.showPicker = false
      this.vote.placeholder = value
    },
  },
}
</script>

<style scped>
.voteAdd {
  background: #f1f1f1;
}

.vote_title {
  margin-top: 15px;
  color: #000;
  margin-top: 46px;
  font-size: 18px;
  padding: 15px;
}
textarea.van-field__control {
  margin-left: 90px;
}
.chang_vote_li1 {
  height: 100%;
  width: 25%;
  text-align: center;
  font-size: 20px;
}

.vote_content {
  margin-top: 10px;
}
.vote_ul {
  display: flex;
  align-items: center;
  background: #ffffff;
}
.chang_vote_li2 {
  flex: 1;
  border-bottom: #dddddd solid 1px;
  box-sizing: border-box;
}
.chang_vote_li2 > input {
  padding-left: 10px;
  height: 40px;
  font-size: 14px;
}
.add {
  height: 25px;
  background-color: #09a3d6;
  text-align: center;
  line-height: 25px;
  width: 25px;
  font-size: 25px;
  margin: auto;
  border-radius: 50%;
  color: #ffffff;
}
.reduce {
  height: 25px;
  background-color: #09a3d6;
  text-align: center;
  line-height: 25px;
  width: 25px;
  font-size: 25px;
  margin: auto;
  border-radius: 50%;
  color: #ffffff;
}
/* 选项说明 */
.explain {
  width: 100%;
  font-size: 14px;
  padding: 10px;
  color: #a1a1a1;
}
.voteType {
  background: #ffffff;
}

/* 投票类型选择 */
.voteType > ul {
  font-weight: normal;
  font-size: 16px;
  height: 45px;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: #dddddd solid 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
}
.block {
  height: 40px;
  display: flex;
  align-items: center;
  /* border-top: #DDDDDD solid 1px ; */
  /* border-bottom:  #DDDDDD solid 1px; */
  box-sizing: border-box;
}
.el-input__inner {
  border: none;
  box-sizing: border-box;
}

/* 单选按钮 */
.vote_radio > .van-radio-group {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-items: space-between;
}
.vote_radio_div {
  height: 100%;
  flex: 1;
}
.van-radio {
  width: 50%;
}
.van-radio_2 {
  text-align: right;
  display: flex;
  justify-items: right;
}

/* 类型 */
.voteTpyeli {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
}
</style>
